<template>
  <div class="resident-origin-bar">
    <EChart
      :option="barOption"
      :width="width"
      :height="height"
    />
  </div>
</template>

<script setup>
import { computed } from 'vue'
import EChart from '@/components/EChart.vue'

const props = defineProps({
  // 数据数组，每个元素包含 name 和 value
  data: {
    type: Array,
    default: () => [
      { name: '北京市', value: 1245 },
      { name: '上海市', value: 987 },
      { name: '广东省', value: 856 },
      { name: '江苏省', value: 743 },
      { name: '浙江省', value: 689 },
      { name: '山东省', value: 567 },
      { name: '河南省', value: 432 },
      { name: '四川省', value: 398 }
    ]
  },
  width: {
    type: Number,
    default: 500
  },
  height: {
    type: Number,
    default: 400
  }
})

const barOption = computed(() => {
  // 只取前8个
  const top8Data = props.data.slice(0, 8)

  return {
    title: {
      text: '租户户籍分布',
      textStyle: {
        fontSize: 20,
        fontWeight: 'bold',
        color: '#e6ff00'
      },
      left: 'center',
      top: 10
    },

    tooltip: {
      trigger: 'item',
      backgroundColor: 'rgba(0, 0, 0, 0.8)',
      borderColor: 'rgba(24, 144, 255, 0.3)',
      borderWidth: 1,
      textStyle: {
        color: '#ffffff',
        fontSize: 14
      },
      formatter: function(params) {
        return `
          <div style="padding: 8px;">
            <div style="color: ${params.color}; font-weight: bold; margin-bottom: 4px;">
              ${params.name}
            </div>
            <div>人数: ${params.value}人</div>
          </div>
        `
      }
    },

    grid: {
      left: '12%',
      right: '8%',
      top: '15%',
      bottom: '15%'
    },

    xAxis: {
      type: 'value',
      name: '人数(人)',
      nameTextStyle: {
        fontSize: 14,
        color: '#bfbfbf',
        padding: [0, 10, 0, 0]
      },
      axisLabel: {
        fontSize: 14,
        color: '#bfbfbf'
      },
      axisLine: {
        lineStyle: {
          color: '#404040'
        }
      },
      axisTick: {
        show: false
      },
      splitLine: {
        show: true,
        lineStyle: {
          color: 'rgba(255, 255, 255, 0.1)'
        }
      }
    },

    yAxis: {
      type: 'category',
      data: top8Data.map(item => item.name),
      axisLabel: {
        fontSize: 14,
        color: '#bfbfbf',
        interval: 0,
        margin: 10
      },
      axisLine: {
        lineStyle: {
          color: '#404040'
        }
      },
      axisTick: {
        show: false
      },
      splitLine: {
        show: true,
        lineStyle: {
          color: 'rgba(255, 255, 255, 0.1)'
        }
      }
    },

    series: [{
      type: 'bar',
      data: top8Data.map(item => ({
        value: item.value,
        name: item.name,
        itemStyle: {
          color: '#1890ff'
        }
      })),
      label: {
        show: true,
        position: 'right',
        fontSize: 14,
        fontWeight: 'bold',
        color: '#ffffff',
        formatter: '{c}'
      },
      barWidth: '50%',
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      },
      animationType: 'slide',
      animationEasing: 'elasticOut',
      animationDelay: function (idx) {
        return idx * 100
      }
    }]
  }
})
</script>

<style scoped>
.resident-origin-bar {
  width: 100%;
  height: 100%;
}
</style>
